<template>
  <div class="subjectAdd">
    <el-dialog
      :title="title"
      width="600px"
      :visible.sync="isShow"
      center
      @close="closeEvent"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="110px"
        class="formBorder"
      >
        <el-form-item prop="rid" :label="$t('route.SubjectNo')">
          <el-input v-model.trim="form.rid" />
        </el-form-item>
        <el-form-item prop="name" :label="$t('route.Subjectname')">
          <el-input v-model.trim="form.name" />
        </el-form-item>
        <el-form-item prop="short_name" :label="$t('route.Newdisciplines')">
          <el-input v-model.trim="form.short_name" />
        </el-form-item>
        <el-form-item prop="intro" :label="$t('route.Introduction')">
          <el-input v-model.trim="form.intro" />
        </el-form-item>
        <el-form-item prop="remark" :label="$t('route.Introduction')">
          <el-input v-model.trim="form.remark" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="isShow = false">{{
            $t('route.cancel')
          }}</el-button>
          <el-button type="primary" @click="submit">{{
            $t('route.confirm')
          }}</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
// 导入
import { subjectAdd, subjectEdit } from '@/api/subject.js'
import i18n from '@/lang'
export default {
  updated () {
    this.title = {
      add: i18n.t('route.Newdisciplines'),
      edit: i18n.t('route.Editingdiscipline')
    }[this.mode]
  },
  // 参数
  props: {
    initList: {
      required: true,
      type: Array
    }
  },
  // 数据
  data () {
    return {
      isShow: false,
      title: '',
      mode: 'add',
      form: {
        rid: '', // 是	string	学科编号
        name: '', // 是	string	学科名称
        short_name: '', // 否	string	学科简称
        intro: '', // 否	string	学科简介
        remark: '' // 否	string	备注
      },
      rules: {
        rid: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (this.mode === 'add') {
                const bol = this.initList.every(item => {
                  if (item.rid !== value) {
                    return true
                  } else {
                    return false
                  }
                })
                bol ? callback() : callback(new Error('学科编码重复'))
              } else if (this.mode === 'edit') {
                // 先过滤自身
                const newArr = this.initList.filter(item => {
                  return item.id !== this.form.id
                })
                // 再判断是否重复
                const bol = newArr.every(item => {
                  if (item.rid !== value) {
                    return true
                  } else {
                    return false
                  }
                })
                bol ? callback() : callback(new Error('学科编码重复'))
              }
            },
            trigger: 'change'
          }
        ],
        name: [
          { required: true, message: '必填', trigger: 'change' },
          {
            validator: (rule, value, callback) => {
              if (this.mode === 'add') {
                const bol = this.initList.every(item => {
                  if (item.name !== value) {
                    return true
                  } else {
                    return false
                  }
                })
                bol ? callback() : callback(new Error('学科名称重复'))
              } else if (this.mode === 'edit') {
                // 先过滤自身
                const newArr = this.initList.filter(item => {
                  return item.id !== this.form.id
                })
                // 再判断是否重复
                const bol = newArr.every(item => {
                  if (item.name !== value) {
                    return true
                  } else {
                    return false
                  }
                })
                bol ? callback() : callback('学科名称重复')
              }
            }
          }
        ]
      }
    }
  },
  // 方法
  methods: {
    //  确定
    submit () {
      this.$refs.form.validate(async result => {
        if (result) {
          if (this.mode === 'add') {
            await subjectAdd(this.form)
            // 提示
            this.$message.success('添加成功')
          } else if (this.mode === 'edit') {
            await subjectEdit(this.form)
            // 提示
            this.$message.success('编辑成功')
            console.log(this.form)
          }
          // 关闭对话框
          this.isShow = false
          // 调用查询方法
          this.$emit('getsubjectlist')
          this.$emit('getsubjectlist2')
          // this.$router.go(0)
        }
      })
    },
    // closeEvent，关闭
    closeEvent () {
      this.$refs.form.resetFields()
      this.form = {
        rid: '', // 是	string	学科编号
        name: '', // 是	string	学科名称
        short_name: '', // 否	string	学科简称
        intro: '', // 否	string	学科简介
        remark: '' // 否	string	备注
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  height: 53px;
  line-height: 53px;
  background: linear-gradient(90deg, #01c4fa, #1294fa);

  .el-dialog__title {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 14px;
    line-height: 53px;
  }
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}
::v-deep .el-dialog__body {
  .formBorder {
    width: 560px;
    margin: 0px -15px;
  }
}
</style>
